<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>MSG: {{ msg.split('').reverse().join('') }}</p>
      <p>MSG2: {{ msg + 'Vue3' }}</p>
      <!-- 
        模板语法中，需要使用的是 JS 的表达式，而不能是 JS语句，下面代码不行 
        如何区分 表达式与语句呢。就看是否可以赋值给一个变量（是否有返回值）
       -->
      <!-- <p>MSG3: {{ if (msg === 'hello') {} }}</p> -->
      <button @click="count++">{{ count % 2 === 0 ? '偶数' : '奇数' }}</button>

      <input type="text" v-model="count" />

      <ul>
        <li v-for="item in fruits">{{ item }}</li>
      </ul>

      <div v-if="userInfo">
        <p>用户名： {{ userInfo.name }}</p>
        <p>性别：{{ userInfo.sex }}</p>

        <button @click="handleLogout">退出登录</button>
      </div>

      <div v-else>
        <button @click="handleLogin">登录</button>
      </div>

      <hr />

      <!-- 直接渲染成字符串 -->
      <div>{{ raw }}</div>
      <!-- 会解析 raw 中的标签，并渲染 -->
      <div v-html="raw"></div>

      <hr />
      <p v-bind:title="count">把鼠标放在我身上</p>

      <img v-bind:src="imgUrl" width="100" height="100" alt="" />
      <button v-on:[eventname]="handleChange">修改 imgUrl</button>
      <button @click="change">修改 eventname</button>
    </div>

    <script src="../../lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        // data 选项下定义的 数据，都会被 代理（proxy）到 当前组件实例上
        data() {
          return {
            msg: "hello",
            count: 1,
            fruits: ["Apple", "Banana", "Orange"],

            userInfo: null, // 用户信息，为 null 时表示未登录，否则为一个对象

            raw: "<button>按钮</button>",

            imgUrl:
              "https://hello-1253323335.cos.ap-guangzhou.myqcloud.com/pic_1.jpeg",

            eventname: "click",
          };
        },

        methods: {
          // 登录
          handleLogin() {
            this.userInfo = {
              name: "张三",
              sex: "男",
            };

            /**
             * this 是一个 Proxy
             *    {
             *      count: xx,
             *      fruits: xxx,
             *      userInfo: xxx,
             *
             *      handleLogin: xxx,
             *      handleLogout: xxx,
             *
             *      $: xxx,,
             *      $attrs: xxx,
             *      $data: xxx,
             *      $el: xxx,
             *      $emit: xxxx,
             *    }
             *
             * this - 组件实例对象
             *    里面 $开头的 我们叫做 实例属性或实例方法
             *    不带 $开头的 我们叫做 代理属性或代理方法
             *                       Vue3 中是通过 Proxy 代理到 this 上的
             *                       Vue2 中是通过 Object.defineProperty 代理到 this 上的
             *
             * 一般我们自定定义的数据或方法不要使用 $开头，避免与他本身的内容产生冲突。
             */
            // console.log("this", this);
          },

          // 退出登录
          handleLogout() {
            this.userInfo = null;
          },

          handleChange() {
            this.imgUrl =
              this.imgUrl ===
              "https://hello-1253323335.cos.ap-guangzhou.myqcloud.com/pic_2.jpeg"
                ? "https://hello-1253323335.cos.ap-guangzhou.myqcloud.com/pic_1.jpeg"
                : "https://hello-1253323335.cos.ap-guangzhou.myqcloud.com/pic_2.jpeg";
          },

          change() {
            this.eventname = "dblclick";
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
